<template>
    <div class="nav-back" :class="{fixed}">
      <van-nav-bar
      :title="title"
      :left-text="leftText"
      :right-text="rightText"
      :left-arrow="leftArrow"
      @click-left="back"
      @click-right="clickRightBtn"
    />
    </div>
  </template>
  
  <script>
    export default {
      name: 'NavBack',
      props: {
        //标题
        title: {
          type: String,
          default: ''
        },
        //右侧文本内容
        rightText: {
          type: String,
          default: ''
        },
        //固定导航
        fixed: {
          type: Boolean,
          default: false
        },
  
        leftText: {
          type: String,
          default: ''
        },
  
        leftArrow: {
          type: Boolean,
          default: false
        }
      },
      methods: {
        //返回上一级
        back() {
          this.$router.back();
          this.$toast.loading({
                overlay:true,
                forbidClick:true,
                closeOnClickOverlay:true,
                message:'加载中.....'
            })
        },
        //点击右侧按钮
        clickRightBtn() {
          this.$emit('clickright');
        }
      }
    }
  </script>
  
  <style lang="less" scoped>
  
  @color: #363636;
  .nav-back{
    /deep/ .van-nav-bar .van-icon{
      color: @color;
    }
  
    /deep/ .van-nav-bar__text{
      color: @color;
    }
  
    &.fixed{
      position: sticky;
      top: 0;
      z-index: 99;
    }
  }
  </style>